<template>
  <div class="container details-layout q-pb-md">
    <q-img class="top-picture" :src="topImg | serverImage"></q-img>

    <div class="details-content relative-position bg-white column q-pa-md q-mb-md">
      <bread-crumbs
        :backText="$t('返回')"
        class="list-page-bread-crumbs q-mb-sm"></bread-crumbs>

      <div class="row no-wrap full-width">
        <div class="list column col">
          <div class="details full-width">
            <slot>
            </slot>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="related && related.length"
      class="row full-width justify-center q-mt-md">
      <list-wrapper
        :url="moreUrl"
        :title="$t('相关推荐')"
        class="related-list q-pa-lg bg-white full-width">
        <list-item
          v-for="(item,index) in related || []" :key="index"
          :date="item[dateField]"
          :label="item[labelField]"
          :title="item[titleField]"
          :content="item[contentField] || item[titleField]"
          :img="item[imgField] && item[imgField].id"
          :roundImg="roundImg"
          :url="`/${channel}/${item.id}`"
          @clicked="relatedItemClicked"></list-item>
      </list-wrapper>
    </div>
    <scroll-top></scroll-top>
  </div>
</template>

<script>
import listWrapper from './listWrapper.vue';
import scrollTop from './scrollTop.vue';
import listItem from './listItem.vue';
import { GoHomeOnLocaleChange } from './mixins/locale';

export default {
  name: 'DetailsLayout',
  mixins: [
    GoHomeOnLocaleChange,
  ],
  props: {
    channel: { type: String },
    data: { type: Object },
    related: { type: Array },
    moreUrl: { type: String },
    labelField: { type: String, default: '标签' },
    dateField: { type: String, default: '日期' },
    titleField: { type: String, default: '标题' },
    contentField: { type: String, default: '详情' },
    imgField: { type: String, default: '图片' },
    roundImg: { type: Boolean, default: false },
  },
  components: {
    listWrapper,
    listItem,
    scrollTop,
  },
  data() {
    return {
      topImg: '',
    };
  },
  computed: {},
  beforeMount() {
    // 顶部背景图
    if (this.channel) {
      this.getRequest(`portal/channel/${this.channel}`).then((d) => {
        this.topImg = ((d && d.data) || {}).img;
      });
    }
  },
  methods: {
    relatedItemClicked() {
      this.scrollTo(document.documentElement, 0, 300);
    },
    scrollTo(element, to, duration) {
      if (duration <= 0) return;
      const difference = to - element.scrollTop;
      // eslint-disable-next-line no-mixed-operators
      const perTick = difference / duration * 10;

      setTimeout(() => {
        element.scrollTop += perTick;
        if (element.scrollTop === to) return;
        this.scrollTo(element, to, duration - 10);
      }, 10);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f7f7f7;
}

.top-picture {
  height: 240px;
}
.details-content {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: -25px;
  border-radius: 8px;
}
.related-list {
  max-width: 1200px;
}
</style>

<style lang="scss">
.details-layout {
  .details-content {
    .list .details {
      .title {
        font-size: 26px;
        color: #333333;
        margin: 35px auto;
        // margin-bottom: 0;

        font-family: "宋体";
      }
      .subtitle {
        font-size: 13px;
        color: #666666;
        margin: 16px auto;

        font-family: "Microsoft YaHei";
      }

      .info {
        font-size: 15px;
        color: #666666;

        .date {
          color: #999999;
          margin-right: 80px;
        }
      }

      .details {
        font-size: 15px;
        color: #333333 !important;
        margin: 60px 80px;
        word-break: break-all;

        * {
          font-family: "宋体";
        }

        img {
          max-width: 100%;
        }

        table * {
          text-indent: 0 !important;
        }
      }
    }
  }
}

.locale-zh-cn {
  .details-layout {
    .details-content {
      .list .details {
        font-size: 16pt;
        .details {
          font-size: 16pt;
          p, >div {
            font-size: 16pt;
          }
        }
      }
    }
  }
}
</style>
